<script lang="ts" setup>
// import { getProList } from '@/api/home'
import { ref, computed } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

interface iPro {
  img1: string
  originprice: number
  proname: string
  proid: string
}
interface IProps {
  // 规定我们可以接收的数据有哪些
  proList: iPro[],
}
// defineProps 是用来接收父组件传递过来的数据
const { proList } = defineProps<IProps>()

// 切换按钮的图标
const iconName: Ref<string> = ref('bars')
// 根据当前 按钮觉得用哪套样式
const classType = computed(() => {
  return iconName.value == 'bars' ? 2 : 1
})

// 点击进入详情页面用的
function toDetail(proid: string) {
  // console.log(proid);

  // 将 id 传递到详情页面中
  // 第一种路由传参的方法：
  // 带参数的动态路由匹配,前提条件是一定要在定义路由时先定义参数
  // router.push('/detail/' + proid)

  // 第二种路由传参的方法
  // 如果有多个参数需要传递，可以使用 query 来进行传递
  // 无需再次在路由中提前定义
  router.push({
    // path: '/detail'
    name: 'detail',
    query: {
      proid: proid,
      name: '张一',
      age: 30,
      sex: '女'
    }
  })
}

</script>
<template>
  <!--cols_1 左图右文,cols_2 上图下文-->
  <ul :class="'proList cols_' + classType">
    <li v-for="item in proList" :key="item.proid" @click="toDetail(item.proid)" class="proItem">
      <div class="itemImage">
        <van-image :src="item.img1" />
      </div>
      <div class="itemInfo">
        <div class="proname van-multi-ellipsis--l2"> {{ item.proname }} </div>
        <div class="price"> ￥{{ item.originprice }} </div>
      </div>
    </li>

    <div class="changIcon" @click="iconName = iconName == 'bars' ? 'apps-o' : 'bars'">
      <!-- <van-icon name="apps-o" size="30" /> -->
      <van-icon :name="iconName" size="30" />
    </div>
  </ul>
</template>
<style scoped lang="scss">
/* 左图右文 */
.cols_1 .proItem {
  height: 1rem;
  display: flex;
  border: 1px solid #f66;
  margin-bottom: 2px;
}

.cols_1 .proItem .itemImage {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  /* padding: 5px;
  box-sizing: border-box; */
}

.cols_1 .proItem .itemInfo {
  flex: 1;
  height: 1rem;
  padding: 5px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

}

.cols_1 .proItem .itemInfo .proname {
  font-size: 14px;
}

.proItem .itemInfo .price {
  color: #f66;
}

/* 上图下文 */
.cols_2 {
  display: flex;
  flex-wrap: wrap;
}

.cols_2 .proItem {
  width: 48%;
  margin: 3px 1%;
  border: 1px solid #f66;
  box-sizing: border-box;
}

.cols_2 .proItem .itemImage {
  width: 100%;
  height: 2rem;
}

.cols_2 .proItem .itemImage .van-image {
  width: 100%;
  height: 100%;
}

.cols_2 .proItem .itemInfo {
  line-height: 22px;
  padding: 5px 10px;
  box-sizing: border-box;
}

/* 切换按钮的样式 */
.changIcon {
  position: fixed;
  bottom: 65px;
  right: 15px;
  width: 36px;
  height: 36px;
  border: 1px solid gray;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
